<template>
  <div class="cess1">
    <navi>建站套餐</navi>
    <div class="webIndexContent middle">
      <div class="contentTop_index">
        <div class="webFeature">
          <div class="feature">
            <div class="featurePic featurePic1"></div>
            <div class="featureTitle"><span>首选品牌</span></div>
            <div class="featureContent">
              企业自助建站第一品牌，专注为企业提供一站式建站服务。
            </div>
          </div>
          <div class="feature">
            <div class="featurePic featurePic2"></div>
            <div class="featureTitle"><span>简单易用</span></div>
            <div class="featureContent">
              所见即所得的傻瓜式操作，零技术也可轻松建站。
            </div>
          </div>
          <div class="feature">
            <div class="featurePic featurePic3"></div>
            <div class="featureTitle"><span>设计精美</span></div>
            <div class="featureContent">
              精美的模板，炫目的特效，千种页面效果任意配。
            </div>
          </div>
          <div class="feature">
            <div class="featurePic featurePic4"></div>
            <div class="featureTitle"><span>特有功能</span></div>
            <div class="featureContent">
              超大网站空间、会员商城、多语言，各种功能应有尽有。
            </div>
          </div>
          <div class="feature jzFast">
            <div class="featurePic featurePic5"></div>
            <div class="featureTitle"><span>极速建站</span></div>
            <div class="featureContent">
              千套网站样板一键复制，行业风格多，极速建站超省时。
            </div>
          </div>
          <div class="feature" style="margin-right: 5px">
            <div class="featurePic featurePic6"></div>
            <div class="featureTitle"><span>金牌服务</span></div>
            <div class="featureContent">
              BGP多线机房，7x24小时自动监控，7x12小时在线咨询。
            </div>
          </div>
        </div>
      </div>
      <div class="contentBottom_index">
        <div class="middleImg_box">
          <a class="img1" hideFocus href="/case"></a>
          <a class="img2" hideFocus href="/website"></a>
          <a class="img3" hideFocus href="/website"></a>
        </div>
        <div class="webFunc">
          <div class="func_index">
            <div class="funcTop"></div>
            <div class="funcMiddle">
              <div class="funcLeft funcLeftImg1"></div>
              <div class="funcRight">
                <div class="funcTitle">免费版，永久免费</div>
                <div class="funcPrice">0 元/永久</div>
                <div class="funcContent">
                  国内首创永久免费、无商业广告的建站产品。
                </div>
                <div class="funcBtn">
                  <a class="funcBtnFree" hideFocus href="/website"></a>
                </div>
              </div>
            </div>
            <div class="funcBottom"></div>
          </div>
          <div class="func_index">
            <div class="funcTop"></div>
            <div class="funcMiddle">
              <div class="funcLeft funcLeftImg2"></div>
              <div class="funcRight">
                <div class="funcTitle">标准版，入门首选</div>
                <div class="funcPrice">1880 元/年</div>
                <div class="funcContent">
                  企业建站的专业选择，模板精美、功能强大。
                </div>
                <div class="funcBtn">
                  <a class="funcBtnGraw funcBtnPro" hideFocus href="/website"></a>
                </div>
              </div>
            </div>
            <div class="funcBottom"></div>
          </div>
          <div class="func_index">
            <div class="funcTop"></div>
            <div class="funcMiddle">
              <div class="funcLeft funcLeftImg4"></div>
              <div class="funcRight">
                <div class="funcTitle">商务版，高端选择</div>
                <div class="funcPrice" style="width: 150px; height: 25px">
                  3880 元/年
                </div>
                <div class="funcContent">
                  满足高端商务需求，自动备份、导出数据，应有尽有！
                </div>
                <div class="funcBtn">
                  <a class="funcBtnGraw funcBtnGrawBiz" hideFocus href="/website">
                  </a>
                </div>
              </div>
            </div>
            <div class="funcBottom"></div>
          </div>
        </div>
      </div>
    </div>
    <div style="clear: both"></div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.cess1 {
  width: 965px;
  margin: 0 auto;
  border: #c9c9c9 1px solid;
  height: auto;
}

.webIndexContent {
  clear: both;
  height: auto;
}

.middle {
  font-size: 12px;
  margin: auto;
  width: 960px;
}

.contentTop_index {
  clear: both;
  width: 100%;
  height: auto;
}

.webFeature {
  padding-left: 5px;
}

.feature {
  border-right: #f0f0f0 1px solid;
  border-top: #f0f0f0 1px solid;
  float: left;
  margin: 10px 10px 0px 0px;
  border-left: #f0f0f0 1px solid;
  width: 145px;
  cursor: pointer;
  border-bottom: #f0f0f0 1px solid;
  height: 240px;
  background-color: #fff;
}

.feature-hover {
  border-left-color: #e3e3e3;
  border-bottom-color: #e3e3e3;
  border-top-color: #e3e3e3;
  background-color: #fbfcfc;
  border-right-color: #e3e3e3;
}

.featurePic {
  margin: 29px auto 13px;
  width: 120px;
  height: 62px;
}

.featurePic1 {
  background: url(/images/all2.png) no-repeat 32px -1002px;
}

.featurePic2 {
  background: url(/images/all2.png) no-repeat -115px -1002px;
}

.featurePic3 {
  background: url(/images/all2.png) no-repeat 32px -1075px;
}

.featurePic4 {
  background: url(/images/all2.png) no-repeat -135px -1075px;
}

.featurePic5 {
  background: url(/images/all2.png) no-repeat 28px -1147px;
}

.featurePic6 {
  background: url(/images/all2.png) no-repeat -120px -1147px;
}

.featureTitle {
  font-weight: bold;
  font-size: 16px;
  color: #213e62;
  text-align: center;
}

.featureContent {
  margin-top: 24px;
  margin-left: 20px;
  width: 115px;
  color: #888;
  line-height: 24px;
}

.contentBottom_index {
  clear: both;
  padding-left: 3px;
  width: 100%;
  padding-top: 17px;
  height: auto;
}

.webFunc {
  float: left;
  width: 960px;
  height: 184px;
}

.func_index {
  float: left;
  margin: 0px 2px 10px 0px;
  width: 314px;
  height: 167px;
}

.funcTop {
  font-size: 1px;
  background: url(/images/funcnewsBg.png) no-repeat 0px 0px;
  width: 314px;
  height: 13px;
}

.funcMiddle {
  background: url(/images/funcnewsBg.png) repeat-y -315px 0px;
  width: 314px;
  height: 141px;
}

.funcLeft {
  float: left;
  margin: 7px 0px 0px 2px;
  width: 126px;
  height: 128px;
}

.funcLeftImg1 {
  background: url(/images/all2.png) no-repeat -135px -1255px;
}

.funcLeftImg2 {
  background: url(/images/all2.png) no-repeat -138px -1410px;
}

.funcLeftImg3 {
  background: url(/images/all2.png) no-repeat 0px -1415px;
}

.funcLeftImg4 {
  background: url(/images/all2.png) no-repeat 0px -1255px;
}

.funcRight {
  float: left;
  margin: 14px 0px 0px 10px;
  width: 150px;
  text-align: right;
}

.funcTitle {
  font-size: 16px;
  color: #213e62;
  line-height: 28px;
  font-family: "微软雅黑";
  height: 28px;
}

.funcPrice {
  font-weight: bold;
  font-size: 13px;
  color: #666;
  line-height: 25px;
  font-family: "宋体";
  height: 25px;
}

.funcContent {
  padding-left: 6px;
  color: #999;
  line-height: 22px;
  text-align: left;
}

.funcBtn {
  margin-top: 4px;
  float: right;
  width: 87px;
  height: 26px;
}

.funcBtnGraw {
  display: block;
  background: url(/images/all.png) no-repeat 0px -339px;
  width: 87px;
  height: 26px;
}

.funcBtnFree {
  display: block;
  background: url(/images/all.png) no-repeat -147px -260px;
  width: 87px;
  height: 26px;
}

.funcBtnFree:hover {
  background: url(/images/all.png) no-repeat -147px -339px;
}

.funcBtnPro:hover {
  background: url(/images/all.png) no-repeat -147px -755px;
}

.funcBtnGrawPro2:hover {
  background: url(/images/all.png) no-repeat 0px -755px;
}

.funcBtnGrawBiz:hover {
  background: url(/images/all.png) no-repeat 0px -260px;
}

.funcBottom {
  background: url(/images/funcnewsBg.png) no-repeat -632px 0px;
  width: 314px;
  height: 13px;
}

.middleImg_box {
  padding-left: 2px;
  height: 175px;
}

.middleImg_box .img1 {
  background: url(/images/img1.png) no-repeat;
  float: left;
  width: 316px;
  height: 149px;
}

.middleImg_box .img2 {
  background: url(/images/img2.png) no-repeat;
  float: left;
  width: 316px;
  height: 149px;
}

.middleImg_box .img3 {
  background: url(/images/img3.png) no-repeat;
  float: left;
  width: 315px;
  height: 149px;
}
</style>